/*
 * @Author: shiguo
 * @Date: 2022-06-07 16:56:17
 * @LastEditors: shiguo
 * @LastEditTime: 2022-11-12 09:39:05
 * @FilePath: /@aks-dev/taro-h5/lib/TableCell/index.tsx
 */

import * as  React from "react";
import { View, Image, Text } from '@tarojs/components'
import { TableCellProps } from '../../types/TableCell'


export const TableCell: React.FC<Partial<TableCellProps>>
    = props => {
        return (
            <View
                style={Object.assign({}, styles.container, props.style)}
                onClick={() => props.onClick && props.onClick()}
            >
                <View style={styles.warpper}>
                    {props.icon && (
                        <Image
                            style={Object.assign({
                                width: '20px', height: '20px', marginRight: '8px',
                                flexShrink: 0
                            }, props.iconStyle)}
                            mode='aspectFit'
                            src={props.icon}
                        />
                    )}
                    <View style={Object.assign({}, styles.middle, props.middleContaierStyle)}>
                        {/* 标题 */}
                        {(() => {
                            if (typeof props.title === 'string' || typeof props.title === 'number') {
                                return (
                                    <Text
                                        style={Object.assign({}, styles.title, styles.oneLine, props.titleStyle)}
                                    >{props.title}</Text>
                                )
                            }
                            if (React.isValidElement(props.title)) return props.title
                            return <View style={styles.title} />
                        })()}


                        {(() => {
                            if (typeof props.content === 'string' || typeof props.content === 'number') {
                                return (
                                    <Text
                                        style={Object.assign({}, styles.content, styles.oneLine, props.contentStyle)}
                                    >{props.content}</Text>
                                )
                            }
                            if (React.isValidElement(props.content)) return props.content

                            return undefined
                        })()}
                    </View>
                    {props.showNav && (
                        <Image
                            style={{ width: '9px', height: '16px', marginLeft: '8px', flexShrink: 0 }}
                            src={require('./back.png')}
                            mode='aspectFit'
                        />
                    )}


                    {props.showUnderline && (
                        <View
                            style={Object.assign({
                                position: 'absolute', width: '100%', height: '1px',
                                bottom: 0, backgroundColor: '#f2f2f2'
                            }, props.underlineStyle)}
                        />
                    )}


                </View>

            </View>

        )
    }


const styles: Record<string, React.CSSProperties> = {
    container: {
        display: 'flex',
        minHeight: '44px',
        paddingLeft: '15px',
        paddingRight: '10px',
        backgroundColor: 'white',
    },
    warpper: {
        flexGrow: 1,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        position: 'relative',
    },
    middle: {
        flexGrow: 1,
        flexShrink: 1,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        // backgroundColor: 'cyan'
    },
    title: {
        // backgroundColor: 'red',
        flexGrow: 0,
        flexShrink: 0,
        fontSize: '14px',
        color: '#333333'
    },
    content: {
        // backgroundColor: 'yellow',
        flexGrow: 1,
        flexShrink: 1,
        fontSize: '14px',
        color: '#666666',
        textAlign: 'right',
        marginLeft:'10px'
    },
    oneLine: {
        // wordBreak: 'break-all',
        // display: '-webkit-box',
        // WebkitLineClamp: 1,
        // WebkitBoxOrient: 'vertical',
        // overflow: "hidden",

        display: '-webkit-box',
        WebkitLineClamp: 1,
        WebkitBoxOrient: 'vertical',
        textOverflow:'ellipsis',
        overflow: 'hidden',
    }
}
